<template>
  <div>
    <h1>自定义指令</h1>
    <input v-focus  ref='inp' type="text">
  </div>
</template>

<script>
/*
自定义指令
自定义指令:自己定义的指令，可以封装一些 dom 操作，扩展额外功能

需求:当页面加载时，让元素将获得焦点autofocus 
  在 safari 浏览器有兼容性
  操作dom: dom元素.focus() 在任何游览器中均可以执行
    mounted () {
      this.$refs.inp.focus()
    }
  *********************************************
  全局注册-语法
    Vue.directive(指令名, {
      "inserted"(el) {
        // 可以对 el 标签，扩展额外功能
        el.focus()
      }  
    })
  局部注册-语法
    directives: {
      "指令名":{
        inserted() {
          // 可以对 el标签，扩展额外功能
          e1.focus()  
        }
      }
    }
  使用
    <input v-指令名 type="text">  
*/
export default {
  /*
  //不用指令 也可以实现本功能需求
  mounted() {
    this.$refs.inp.focus()
  }
  */
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

<style>

</style>